<template>
    <div class="app-container">
        <el-card shadow="never" class="box-cards" v-permission="'addUser'">
            <el-button type="primary" @click="onAdd">新增</el-button>
        </el-card>
        <el-table :data="tabList" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="60">
                <template #default="{ row }">
                    {{ row.id }}
                </template>
            </el-table-column>
            <el-table-column prop="username" label="分类名称">
                <template #default="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>
            <el-table-column prop="nickName" label="级别">
                <template #default="{ row }">
                    {{ row.level === 0 ? "一级" : "二级" }}
                </template>
            </el-table-column>
            <el-table-column prop="email" label="商品数量">
                <template #default="{ row }">
                    {{ row.productCount }}
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="数量单位">
                <template #default="{ row }">
                    {{ row.productUnit }}
                </template>
            </el-table-column>
            <el-table-column label="导航栏">
                <template #default="{ row }">
                    <el-switch v-model="row.navStatus" :active-value="1" :inactive-value="0" @click="switchNav(row)" />
                </template>
            </el-table-column>
            <el-table-column label="是否显示">
                <template #default="{ row }">
                    <el-switch v-model="row.showStatus" :active-value="1" :inactive-value="0" @click="switchStatus(row)" />
                </template>
            </el-table-column>
            <el-table-column label="排序">
                <template #default="{ row }">
                    {{ row.sort }}
                </template>
            </el-table-column>
            <el-table-column label="设置" width="200px">
                <template #default="{ row }">
                    <el-button :disabled="row.level === 0 ? false : true" link type="primary" size="small"
                        @click="LookDown(row.id)">查看下级</el-button>
                    <el-button link type="primary" size="small">转移商品</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="Edit(row.id)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="del(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http"
import { reactive } from "vue";
import { useRouter } from "vue-router";
import umsTable from "@/hooks/umsTable"
import { ElMessage } from "element-plus";

const router = useRouter()

const onAdd = () => {
    router.push('addProductCate')
}

const serachVal = reactive({
    parentId: 0,
})

const LookDown = (val: number) => {
    serachVal.parentId = val
    getAdminList()
}

const switchNav = (val: CateList) => {
    http.productCate.productCategoryUpdateNavStatus({
        ids: val.id!,
        navStatus: val.navStatus
    }).then(res => {
        if (res.code === 200) {
            ElMessage.success(res.message)
        } else {
            ElMessage.warning("更新失败请联系管理员")
            val.navStatus = res.data === res.data ? res.data : val.navStatus
        }
    }).catch(() => {
        ElMessage.warning("更新失败请联系管理员")
        val.navStatus = val.navStatus === 1 ? 0 : 1
    })
}

const switchStatus = (val: CateList) => {
    http.productCate.productCategoryUpdateShowStatus({
        ids: val.id!,
        showStatus: val.showStatus
    }).then(res => {
        if (res.code === 200) {
            ElMessage.success(res.message)
        } else {
            ElMessage.warning("更新失败请联系管理员")
            val.showStatus = res.data === res.data ? res.data : val.showStatus
        }
    }).catch(() => {
        ElMessage.warning("更新失败请联系管理员")
        val.showStatus = val.showStatus === 1 ? 0 : 1
    })
}

const del = (val: number) => {
    http.productCate.productCategoryDelete(val).then(() => {
        ElMessage.success("删除成功")
        getAdminList()
    })
}

const Edit = (id: number) => {
    router.push({ name: 'addProductCate', query: { id } })
}

const { tabList,
    paginationParams,
    handleSizeChange,
    handleCurrentChange,
    getAdminList } = umsTable(http.productCate.productCategoryList, serachVal)
getAdminList()
</script>

<style scoped lang="less">
.form-container {
    padding: 35px 35px 15px 35px;
    margin-bottom: 35px;

    .form-content {
        margin-top: 50px;
    }
}

.el-pagination {
    padding: 20px 20px;
    float: right;
}

.el-table--border {
    margin-top: 20px;
    text-align: center;
}

:deep(.cell) {
    text-align: center;
}
</style>